import DialogBox from "@/components/DialogBox";
import { getAlarmList, processAlarm } from "@/api/modules/iot/alarm";
import AlarmLevel from "@/components/Sansan/Model/components/AlarmLevel";
import { duration } from "@/utils/format";
import { showTips } from "@/utils/util";
import { dayjs } from "element-plus";
// import { useRouter } from "vue-router";
import "./alarmEventList.scss";
export default defineComponent({
	props: {
		size: Number,
		height: {
			type: String,
			default: "calc(100% - 45px);"
		}
	},
	emits: ["lastAi"],
	setup(props, { expose }) {
		// const router = useRouter();
		const state = reactive({
			dictMap: {} as { [key: string]: string },
			alarmList: [] as any[],
			deviceList: [] as any
		});
		const loadData = async () => {
			let res: any = await getAlarmList({
				collapsed: true,
				processStatus: false,
				deptId: "",
				pageIndex: 1,
				pageSize: props.size || 20
			});
			state.alarmList = res.result?.records || [];
		};
		const executeAlarm = (row: any) => {
			suggestionAlarmDialog.suggestion = "";
			suggestionAlarmDialog.dataList = [row];
			suggestionAlarmDialog.devNames = [row.devName || row.devSn];
			suggestionAlarmDialog.visible = true;
		};

		const suggestionAlarmDialog = reactive({
			visible: false,
			suggestion: "",
			dataList: [] as any[],
			devNames: [] as string[],
			title: "告警处理"
		});
		const suggestionAlarm = async () => {
			let id = suggestionAlarmDialog.dataList.map(item => item.id).join(",");
			let suggestion = suggestionAlarmDialog.suggestion;
			let { code, message } = await processAlarm({ id: id, suggestion: suggestion });
			suggestionAlarmDialog.visible = false;
			let ok = showTips(code, "告警处理", message);
			if (ok) {
				loadData();
			}
		};
		expose({ loadData: loadData });
		return () => {
			return (
				<div class="w-full h-full alarm-event-list">
					<DialogBox
						width="600px"
						title={suggestionAlarmDialog.title}
						v-model:visible={suggestionAlarmDialog.visible}
						onConfirm={() => suggestionAlarm()}
					>
						<el-form label-width="100px">
							<el-form-item label="告警设备">{suggestionAlarmDialog.devNames.join(", ")}</el-form-item>
							{suggestionAlarmDialog.dataList.length == 1 ? (
								<>
									<el-form-item label="变量信息">
										{suggestionAlarmDialog.dataList[0].varName || suggestionAlarmDialog.dataList[0].detailvarKey}
									</el-form-item>
									<el-form-item label="告警值">{suggestionAlarmDialog.dataList[0].varValue}</el-form-item>
									<el-form-item label="持续时长">{duration(dayjs(suggestionAlarmDialog.dataList[0].createTime))}</el-form-item>
								</>
							) : null}
							<el-form-item label="处理意见">
								<el-input
									type="textarea"
									v-model={suggestionAlarmDialog.suggestion}
									placeholder="请输入处理内容"
									rows={6}
								></el-input>
							</el-form-item>
						</el-form>
					</DialogBox>
					<div class="block-title">
						<span>实时告警</span>
						{/* <el-link underline={false} class="more" onClick={() => router.push("/alarm/list")}>
							更多
						</el-link> */}
					</div>
					<el-scrollbar class="data-list" style={{ height: props.height }}>
						{!state.alarmList?.length ? <div class="p-4">没有相关数据</div> : null}
						{state.alarmList?.map((item: any) => {
							return (
								<el-tooltip show-after={500}>
									{{
										default: () => {
											return (
												<div class="event-item">
													{/* <div class="time">{item.createTime}</div> */}
													<div class=" flex justify-between items-center w-full">
														<div class="row-icon"></div>
														<div class={["event-tag"]}>
															<AlarmLevel v-model={item.level} />
														</div>
														<div class="text truncate">{(item.devName || item.devSn) + ", " + item.alarmType}</div>
														<div class="time text-center">
															<el-link underline={false} class="execute" onClick={() => executeAlarm(item)}>
																立即处理
															</el-link>
														</div>
													</div>
												</div>
											);
											executeAlarm;
										},
										content: () => {
											return (
												<div>
													<div>立即处理：{item.devName || item.devSn}</div>
													<div>告警类型：{item.alarmType}</div>
													<div>
														告警内容：{item.varName}={item.varValue}
													</div>
													<div>告警时间：{item.alarmTime}</div>
													<div>
														告警等级：
														<AlarmLevel v-model={item.level} />
													</div>
												</div>
											);
										}
									}}
								</el-tooltip>
							);
						})}
					</el-scrollbar>
				</div>
			);
		};
	}
});
